import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, PixelRatio, Image
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import MethodUtil from '../../../utils/MethodUtil';
import { CURRENCY } from '../../../utils/helper';
import { RefuseModal } from '../../../component/ModalVerifylComponent.js';
import ToastUtil from '../../../utils/toast';
const scale = GLOBAL.SCALE;
const unfold = require('../../../imgs/unfold.png');
import HTTP from '../../../utils/http';
import { API, API_GENERATE } from '../../../config/api';

export class NewOilApproveItem extends Component {
	constructor(props) {
		super(props);
		this.state = {
			fold: true,
			refuseModalVisible: false,
		}
	}
	async _fetchApproval () {
		const { itemInfo, loadRefresh } = this.props;
		let { businessKey, taskId, formKey } = itemInfo.taskInfo;
		if(this.isAgreed == '0'&&!this.remark){
			ToastUtil.showWarning('请填写驳回原因')
			return
		}
		const sendData = {
			businessKey: businessKey,
			taskId: taskId,
			formKey: formKey,
			auditResult: this.isAgreed,
			remark: this.remark, // 填写
		}
		this.setState({ refuseModalVisible: false, loaded: true });
		const responseData = await HTTP.POST(API_GENERATE(API.ZXY_ORDER_APPROVE), sendData);
		this.setState({ loaded: false });
		if (responseData) {
			ToastUtil.showSuccess((this.isAgreed == '0') ? '驳回成功' : '审批成功').then(() => { loadRefresh() })
		}
	}
	onFoldChange () {
		this.setState({
			fold: !this.state.fold
		})
	}
	approveAgree () {
		this.isAgreed = '1';
		this.remark = "";
		this.setState({
			refuseModalVisible: true
		})
	}
	approveRefuse () {
		this.isAgreed = '0';
		this.remark = "";
		this.setState({
			refuseModalVisible: true
		})
	}
	render () {
		const { fold } = this.state;
		const {goDetail,itemInfo} = this.props;
		let { orderInfo, orderItemList } = itemInfo;
		let {companyName,createTime,orderId,portName,bizStaffName,staffOrganName,totalItemQuantity} = orderInfo
		let orderItemListSlice
		if (orderItemList && orderItemList.length > 2 && fold) {
			orderItemListSlice = orderItemList.slice(0, 2)
		}
		else {
			orderItemListSlice = orderItemList
		}
		return (
			<View style={styles.order}>
				<View>
					<View style={styles.orderHead}>
						<View style={styles.orderHeadLeft}>
							<Text style={styles.orderHeadText}>
								{
									companyName ? (
										companyName.length > 14 ? companyName.substr(0, 14) + '...' : companyName
									) : null
								}
							</Text>
						</View>
						<Text style={styles.statusText}>{createTime.substring(0,16) || '-'}</Text>
					</View>
				</View>
				<TouchableOpacity activeOpacity={.5} style={styles.orderCell}
					onPress={() => {
						goDetail()
					}
					}>
					<View style={styles.orderHeadView}>
						<View>
							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 5,justifyContent:'space-between' }}>
								<Text style={styles.ordertitle}>{orderId ? orderId : null}</Text>
								<Text style={{color:'red',fontSize:12,fontWeight:'600'}}>{portName ? portName : null}</Text>
							</View>
							<Text style={{ fontSize: 10 * scale, color: '#848A96' }}>
								{bizStaffName?`（申请人：${bizStaffName}（${staffOrganName}））`:null}
							</Text>
						</View>
					</View>
					<View style={styles.costTableLine}></View>
					<View style={styles.orderMain}>
						{
							orderItemListSlice && orderItemListSlice.length > 0 ?
								orderItemListSlice.map((orderItemListSlice, index) => {
									return (
										<View key={index} style={{ marginBottom:5 }}>
											<View style={styles.orderCol}>
												<View>
													<Text style={styles.orderValTitle}>{orderItemListSlice.goodsName.length > 14 ? orderItemListSlice.goodsName.substr(0, 14) + '...' : orderItemListSlice.goodsName || null}</Text>
												</View>
												<View style={{alignItems: 'center',alignItems:'flex-end' }}>
													{orderItemListSlice.transInQuanlity?
														<Text style={[styles.orderVal]}>
														内销量 {orderItemListSlice.transInQuanlity} 吨
													</Text>:null
													}
													{orderItemListSlice.portOpenQuanlity?
														<Text style={styles.orderVal}>
															内敞口量 {orderItemListSlice.portOpenQuanlity} 吨
														</Text>
														:null
													}
												</View>
											</View>
										</View>
									)
								})
								: null
						}
					</View>
					{orderItemList && orderItemList.length > 2 ?
						<TouchableOpacity style={{ alignItems: 'center', paddingTop: 5, paddingBottom: 10 }} onPress={() => { this.onFoldChange() }}>
							<View>
								<Image source={unfold} style={fold ? styles.fold : styles.unfold} />
							</View>
						</TouchableOpacity>
						: null
					}
					<View style={styles.costTableLine}></View>
					<View style={styles.bottomTotol}>
						<View>
							<Text style={{ fontSize: 12 }}>
								合计：{totalItemQuantity||'-'} 吨
							</Text>
						</View>
						<View style={styles.bottomTotolRight}>
							<TouchableOpacity style={styles.bottomButtonLeft} onPress={() => { this.approveAgree(); }}>
								<Text style={{ fontSize: 12, color: "#fff" }}>同意</Text>
							</TouchableOpacity>
							<TouchableOpacity style={styles.bottomButtonRight} onPress={() => { this.approveRefuse(); }}>
								<Text style={{ fontSize: 12, color: "#0E7FFD" }}>驳回</Text>
							</TouchableOpacity>
						</View>
					</View>
				</TouchableOpacity>
				<RefuseModal	
					titleText={'审批意见'}
					placeholderText={this.isAgreed == '1' ? '请输入同意原因' : '请输入驳回原因'}
					propsDefaultValue={this.isAgreed == '1' ? '审批同意' : '审批驳回'}
					visible={this.state.refuseModalVisible}
					auditRemark={this.remark}
					btnPress={(remark) => {
						this.remark = remark;
						this._fetchApproval();
					}}
					bgPress={() => {
						this.setState({
							refuseModalVisible: false,
						});
					}} />
			</View>
		)
	}
}

const styles = StyleSheet.create({
	orderCell: {
		// width: 375 * scale,
		backgroundColor: '#fff',
		// alignItems: 'center',
		marginBottom: 12,
		borderRadius: 6,
		paddingTop: 6,
		// paddingBottom: 10
	},
	order: {
		// backgroundColor: '#e4e4e4'
		// width: 351 * scale,
	},
	orderHead: {
		// width: 351 * scale,
		height: 44 * scale,
		justifyContent: 'space-between',
		alignItems: 'center',
		flexDirection: 'row',
	},
	orderHeadView: {
		paddingLeft: 14,
		paddingRight: 14,
		paddingBottom: 10,
		// borderBottomColor: '#e4e4e4',
		// borderBottomWidth: 1,
	},
	costTableLine: {
		borderBottomWidth: 1 / PixelRatio.get(),
		backgroundColor: '#E3E7F0',
		borderStyle: 'solid',
		opacity: 0.3,
	},
	orderHeadLeft: {
		height: 44 * scale,
		alignItems: 'center',
		flexDirection: 'row',
	},
	orderHeadText: {
		fontSize: 14 * scale,
		color: '#222',
		// marginRight: 6 * scale,
		// marginLeft: 6 * scale,
		flexWrap: 'wrap',
	},
	conImage: {
		width: 20 * scale,
		height: 14 * scale,
		marginLeft: 5 * scale,
	},
	forwardText: {
		paddingTop: 2 * scale,
		marginTop: 2 * scale,
		marginRight: 6 * scale,
		width: 30 * scale,
		height: 16 * scale,
		backgroundColor: '#49CAFF',
		color: '#FFFFFF',
		fontSize: 11 * scale,
		textAlign: 'center',
		borderRadius: 4 * scale,
	},
	statusText: {
		fontSize: 12 * scale,
		color: '#848A96',
	},
	orderCol: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'flex-start',
		paddingBottom: 10,
	},
	orderText: {
		fontSize: 12 * scale,
		color: '#8B8B8B'
	},
	orderVal: {
		fontSize: 12 * scale,
		color: '#000',
		marginBottom:5*scale
	},
	orderMain: {
		paddingTop: 8 * scale,
		// paddingBottom: 10 * scale,
		paddingLeft: 14 * scale,
		paddingRight: 14 * scale,
	},
	tip: {
		color: '#fff',
		fontSize: 12 * scale,
		borderRadius: 4 * scale,
		paddingRight: 5 * scale,
		paddingLeft: 5 * scale,
		marginRight: 5 * scale
	},
	ordertitle: {
		fontSize: 12 * scale,
	},
	arrow: {
		width: 6,
		height: 8
	},
	orderValTitle: {
		fontSize: 13,
		color: '#0C0C0D',
		fontWeight: '600'
	},
	bottomTotol: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		paddingHorizontal: 12,
		paddingVertical: 15,
		alignItems: 'center',
	},
	bottomTotolRight: {
		flexDirection: 'row',
		justifyContent: 'space-between',

	},
	bottomButtonLeft: {
		backgroundColor: '#0E7FFD',
		borderWidth: 1,
		borderColor: '#0E7FFD',
		borderRadius: 30,
		paddingHorizontal: 24,
		paddingVertical: 7,
		marginRight: 9
	},
	bottomButtonRight: {
		borderWidth: 1,
		borderColor: '#0E7FFD',
		borderRadius: 30,
		paddingHorizontal: 24,
		paddingVertical: 7,
	},
	fold: {
		marginTop: 5,
		height: 15,
		width: 15
	},
	unfold: {
		marginTop: 5,
		height: 15,
		width: 15,
		transform: [{ rotate: '180deg' }]
	},
	orderType: {
		borderRadius: 2,
		paddingHorizontal: 4,
		paddingVertical: 2,
		marginLeft: 5
	},
	priceType: {
		backgroundColor: '#FBEFE8',
		borderRadius: 2,
		paddingVertical: 2,
		paddingHorizontal: 5,
		fontSize: 11,
		color: '#FA6400',
		marginRight: 5
	}
})